import Image from "next/image";
import { Star, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

type Product = {
  id: string;
  name: string;
  price: number;
  rating: number;
  description: string;
  priceHistory: { date: string; price: number }[];
  recommendations: { id: number; name: string; price: number }[];
};

export default function ProductDetail({ product }: { product: Product }) {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid md:grid-cols-2 gap-8">
        <div>
          <Image
            src="/placeholder.svg"
            alt={product.name}
            width={500}
            height={500}
            className="rounded-lg object-cover w-full"
          />
        </div>
        <div className="space-y-4">
          <h1 className="text-3xl font-bold">{product.name}</h1>
          <div className="flex items-center space-x-2">
            <div className="flex">
              {[...Array(5)].map((_, i) => (
                <Star
                  key={i}
                  className={`w-5 h-5 ${
                    i < Math.floor(product.rating)
                      ? "text-yellow-400 fill-yellow-400"
                      : "text-gray-300"
                  }`}
                />
              ))}
            </div>
            <span className="text-sm text-gray-600">({product.rating})</span>
          </div>
          <p className="text-2xl font-bold">${product.price.toFixed(2)}</p>
          <p className="text-gray-600">{product.description}</p>
          <Button className="w-full">Add to Cart</Button>
        </div>
      </div>

      <div className="mt-12">
        <h2 className="text-2xl font-bold mb-4">Price History</h2>
        <div className="h-64 flex items-end space-x-4">
          {product.priceHistory.map((item, index) => (
            <div key={index} className="flex flex-col items-center">
              <div
                className="bg-blue-500 w-16"
                style={{ height: `${(item.price / 250) * 100}%` }}
              ></div>
              <span className="mt-2 text-sm">{item.date}</span>
              <span className="text-sm font-bold">${item.price}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="mt-12">
        <h2 className="text-2xl font-bold mb-4">Recommended Products</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {product.recommendations.map((item) => (
            <Card key={item.id}>
              <CardContent className="p-4">
                <Image
                  src="/placeholder.svg"
                  alt={item.name}
                  width={200}
                  height={200}
                  className="rounded-lg object-cover w-full h-48 mb-2"
                />
                <h3 className="font-bold">{item.name}</h3>
                <p className="text-sm text-gray-600">
                  ${item.price.toFixed(2)}
                </p>
                <Button variant="outline" className="w-full mt-2">
                  View Details
                  <ChevronRight className="w-4 h-4 ml-2" />
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}
